<template>
  <view class="home-category">
    <block v-for="item in category" :key="item.id">
      <navigator class="cate-item"
        :url="`/pages/imgCategory/index?id=${item.id}`"
      >
        <image mode="aspectFill" :src='item.cover'></image>
        <view class="cate-name">{{item.name}}</view>
      </navigator>
    </block>
  </view>
</template>

<script>
import { getCateList } from "../../../network/home.js";
export default {
  mounted() {
    uni.setNavigationBarTitle({ title: "分类" });
    this.__getCateList()
  },
  data() {
    return {
      category: []
    }
  },
  methods: {
    // ============ 发送网络请求 ====================
    async __getCateList() {
      const res = await getCateList()
      this.category = res.res.category;
    }
  }
};
</script>

<style lang='scss' scoped>
  .home-category {
    display: flex;
    flex-wrap: wrap;
    .cate-item {
      width: 33.33%;
      border: 5rpx solid #fff;
      position: relative;
      image {
        height: 240rpx;
      }

      .cate-name {
        position: absolute;

        bottom: 0;
        width: 100%;
        padding-left: 20rpx;
        font-size: 40rpx;
        color: #fff;
      }
    }

}
</style>